<template>
  <view class="about-container">
    <scroll-view scroll-y class="content-wrapper">

      <!-- 藏文部分 -->
      <view class="section tibetan-section">
        <text class="section-title">སྐད་ལྔ་ཤན་སྦྱར་ཚིག་མཛོད་ཀུན་གསལ་མེ་ལོང་།</text>
        <rich-text :nodes="tibetanContent"></rich-text>
      </view>

      <!-- 中文部分 -->
      <view class="section chinese-section">
        <text class="section-title">简介</text>
        <rich-text :nodes="chineseContent"></rich-text>
      </view>

      <!-- 英文部分 -->
      <view class="section english-section">
        <text class="section-title">Introduction</text>
        <rich-text :nodes="englishContent"></rich-text>
      </view>

    </scroll-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      // 藏文内容
      tibetanContent: `
        <p style="font-family:'Jomolhari', sans-serif; font-size:30rpx; line-height:1.8; color:#4a5568; text-indent:2em;">
          ཚིག་མཛོད་འདི་ནི་བོད་ཡིག་དང་སོག་ཡིག རྒྱ་ཡིག མན་ཡིག ཡུར་ཡིག་སོགས་ཡིག་རིགས་ལྔ་ཤན་སྦྱར་གྱི་ཚིག་མཛོད་ཅིག་ཡིན། དེར་བཀོད་པའི་མིང་གི་རྣམ་གྲངས་མང་བས་དོན་གཉེར་ཅན་རྣམས་ལ་བློ་སྐྱེད་ཀྱི་ཕན་པ་ཤིན་ཏུ་ཆེ། དེ་ནི་སྤྱི་ལོའི་དུས་རབས་བཅོ་བརྒྱད་པའི་སྐབས་ཀྱི་མན་ཆིང་རྒྱལ་རབས་ཀྱི་གོང་མ་ཆེན་ལུང་གི་དུས་སུ་བརྩམས་པ་ཞིག་ཡིན་པས་ལོ་རྒྱུས་ཐོག་ཏུའང་རྩིས་ཆེན་བྱེད་དགོས་པ་ཞིག་དང་། ལྷག་པར་དེའི་ནང་གི་ཡུ་གུར་ཡི་གེའི་སྐོར་དེ་ཤིན་ཏུ་དཀོན་པ་ཞིག་ཡིན།
        </p>
        <p style="font-family:'Jomolhari', sans-serif; font-size:30rpx; line-height:1.8; color:#4a5568; text-indent:2em;">
          ཡིག་རིགས་ལྔའི་གོ་རིམ་ནི་དང་པོ་ལ་མན་ཇུའི་ཡི་གེ་དང་། དེ་ནས་རིམ་བཞིན་བོད་ཡིག་དང་། སོག་ཡིག ཡུ་གུར་གྱི་ཡི་གེ། རྒྱ་ཡིག་བཅས་ཡིན་ལ། དེའི་ནང་དུ་བོད་ཡིག་གི་མིང་ཚིག་རེ་རེའི་འོག་ཏུ་མན་ཇུའི་ཡི་གེའི་མཆན་གཉིས་རེ་ཡོད་དེ། གཅིག་ནི་ཡི་གེའི་དག་ཆ་གཙོ་བོར་བཟུང་སྟེ་ཡིག་འབྲུ་རེ་རེ་བཞིན་དེད་ནས་བསྒྱུར་བ་དང་། གཅིག་ནི་ཀློག་གདངས་གཙོ་བོར་བཟུང་སྟེ་བསྒྱུར་བ་ཞིག་ཡིན། ཡུ་གུར་གྱི་མིང་ཚིག་རེ་རེའི་འོག་ཏུའང་མན་ཇུའི་ཡི་གེའི་ཀློག་གདངས་རེ་བཀོད་འདུག 
        </p>
        <p style="font-family:'Jomolhari', sans-serif; font-size:30rpx; line-height:1.8; color:#4a5568; text-indent:2em;">
          དེར་བརྟེན། ང་ཚོས་སྐད་རིགས་སྣ་མང་ཞིབ་འཇུག་བྱེད་མཁན་གྱི་མཁས་པའི་སྡེ་ལ་དམིགས་ཏེ། བོད་ཡིག་གཙོ་བྱས་གློག་རྡུལ་གྱི་སྐད་ལྔ་ཤ་སྦྱར་ཚིག་མཛོད་ཅིག་གསར་སྤེལ་བྱས་ཡོད། ཚིག་མཛོད་འདིར་སྤྱི་བསྡོམས་པའི་ནང་དོན13བཀོད་སྒྲིག་བྱས་པ་སྟེ། བོད་སྐད་དང་། རྒྱ་སྐད། སོག་སྐད་དང་། མན་སྐད། ཡུ་གུར་སྐད། དེར་མ་ཟད། བོད་སྐད་ལ་ལ་ཏིང་ཡི་གེ་དང་། མིང་གི་ངོ་བོའམ་རང་བཞིན། བོད་སྐད་ཀྱི་ཚིག་གྲུབ་སྒྲིག་སྲོལ། ད་དུང་རྒྱ་ཡིག་གི་ཟོར་ཡངས་ཡི་གེ་བཅས་བཀོད་ཡོད། སྤྱོད་མཁན་གྱིས་སྐད་རིགས་གང་རུང་གཅིག་གཏགས་ཏེ་མཇུག་འབྲས་འཚོལ་ཞིབ་བྱས་ཆོག
        </p>
      `,

      // 中文内容
      chineseContent: `
        <p style="font-size:30rpx; line-height:1.8; color:#4a5568; text-indent:2em; text-align:justify;">
            此部词典是一部五种文字对照的分类词书，是18世纪时（清乾隆间）福戍的，没有刊印过。这部书内容丰富，有历史价值，也有实用价值，特别是维吾尔文部分更为珍贵，是我国各民族共同的文化遗产，因此我社把它影印出来，供各族人民及国内外学者参考研究。 五种文字的次序是满、藏、蒙、杂吾尔，汉。其中藏文的下面有两种满文注音，一种是"切昔"即逐个字母的对译，能够按着一定的规律还原为藏文的。一种是"对音"即实际发音，这是因为藏文的读昔与古代已有相当的出入，而正字法上仍然保存着古代的拼缀形式的缘故。维吾尔文下面也有满文的对昔，蒙文和汉文下面都没有满文对音，因此这部五种文字的辞书就有了八栏。
        </p>
        <p style="font-size:30rpx; line-height:1.8; color:#4a5568; text-indent:2em; text-align:justify;">
            为便于检索，我们研发了以藏文为主的《五体清文鉴》在线词典，设置13项字段：藏语、汉语、蒙语、满语、维语、卷、类、则、藏语拉丁转写、藏语词性、藏语词性标注、藏语句法规则及汉语简体字。用户可通过输入任意一种语言的文字查询对应结果。
        </p>
      `,

      // 英文内容
      englishContent: `
        <p style="font-family:'Georgia', serif; font-size:28rpx; line-height:1.6; color:#4a5568; text-indent:2em; text-align:justify;">
          This dictionary is a classification word book that compares five different languages. It was compiled during the 18th century (during the reign of Emperor Qianlong of the Qing Dynasty) and has not been printed. This book has rich content, historical value, and practical value, especially the Uyghur part, which is even more precious and a common cultural heritage of all ethnic groups in China. Therefore, our company has reproduced it for reference and research by people of all ethnic groups and scholars at home and abroad. The order of the five scripts is Manchu, Tibetan, Mongolian, Zawu'er, and Han. There are two types of Manchu phonetic annotations below Tibetan, one of which is "qixi", which is a letter by letter translation that can be restored to Tibetan according to certain rules. One type is' dui yin ', which refers to the actual pronunciation, because the pronunciation of Tibetan script differs significantly from ancient times, and the orthography still preserves the ancient spelling forms. Under the Uyghur script, there are also Manchu homophones for the past, while Mongolian and Chinese scripts do not have Manchu homophones. Therefore, this dictionary of five languages has eight columns.
        </p>
        <p style="font-family:'Georgia', serif; font-size:28rpx; line-height:1.6; color:#4a5568; text-indent:2em; text-align:justify;">
          For the convenience of retrieval, we have developed an online dictionary called "Wuti Qingwen Jian" mainly in Tibetan, with 13 fields: Tibetan, Chinese, Mongolian, Manchu, Uyghur, Volume, Class, Ze, Tibetan Latin transliteration, Tibetan part of speech, Tibetan part of speech tagging, Tibetan syntactic rules, and simplified Chinese characters. Users can search for corresponding results by entering text in any language.
        </p>
      `,
    };
  },
};
</script>
<style scoped>
  .about-container {
    height: 100%;
    background: #f8f9fa;
	overflow: hidden;
	
  }

  .content-wrapper {
    height: 100%;
  box-sizing: border-box;
  }

  .section {
    margin-bottom: 40rpx;
    padding: 30rpx;
    background: white;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
  }

  .section-title {
    display: block;
    font-size: 34rpx;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 20rpx;
    border-left: 6rpx solid #3498db;
    padding-left: 20rpx;
  }

  /* 对藏文文本增加缩进 */
  .tibetan-text {
    font-family: 'Jomolhari', sans-serif;
    font-size: 30rpx;
    line-height: 1.8;
    color: #4a5568;
    text-align: justify;
    text-indent: 2em; /* 增加藏文文本的段落缩进 */
  }

  .chinese-text {
    text-indent: 2em;
    font-size: 30rpx;
    line-height: 1.8;
    color: #4a5568;
    text-align: justify;
  }

  .english-text {
    font-family: 'Georgia', serif;
    font-size: 28rpx;
    line-height: 1.6;
    color: #4a5568;
    text-align: justify;
    text-indent: 2em;
  }

  @media (min-width: 768px) {
    .section {
      padding: 40rpx;
    }
    
    .section-title {
      font-size: 36rpx;
    }
    
    .tibetan-text,
    .chinese-text,
    .english-text {
      font-size: 32rpx;
    }
  }
</style>